<template>
  <div>
    <el-dialog width="75%" title="配置折扣" :visible.sync="outerVisible">
      <el-dialog
        width="60%"
        title="折扣商品"
        :visible.sync="innerVisible"
        append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="商品名称" prop="name">
            <el-input disabled v-model="form.name" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="商品图片" prop="goodsInfo">
            <img style="width:100px;height:120px" :src="form.zhanimg" alt="">
          </el-form-item>
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker :disabled="form.status !== 0" clearable v-model="form.startTime" type="date" value-format="timestamp" placeholder="选择开始时间" />
          </el-form-item>
          <el-form-item label="结束时间" prop="entTime">
            <el-date-picker :disabled="form.status !== 0" clearable v-model="form.entTime" type="date" value-format="timestamp" placeholder="选择结束时间" />
          </el-form-item>
        </el-form>
        <el-table ref="myTable" :data="form.goodsInfo" border style="width: 70%">
            <el-table-column prop="" label="" type="expand" width="30">
              <template v-slot="scope">
                <el-table :data="scope.row.child" border style="width: 100%">
                  <el-table-column prop="size" label="尺码">
                    <template v-slot="scop">
                      <div>
                        <el-input v-model="scop.row.size" disabled placeholder="请输入内容"></el-input>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="price" label="价格">
                    <template v-slot="scop">
                      <div>
                        <el-input v-model="scop.row.price" disabled placeholder="请输入内容"></el-input>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="num" label="库存数量">
                    <template v-slot="scop">
                      <div>
                        <el-input v-model="scop.row.num" disabled placeholder="请输入内容"></el-input>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="weight" label="重量">
                    <template v-slot="scop">
                      <div style="display:flex;align-items:center;">
                        <el-input v-model="scop.row.weight" disabled placeholder="请输入内容"></el-input>
                        <span style=" white-space: nowrap;">kg</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="groupPrice" label="折扣价格">
                    <template v-slot="scop">
                      <div>
                        <el-input v-model="scop.row.groupPrice" placeholder="请输入内容"></el-input>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
          </el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="url" label="图片">
            <template v-slot="scope">
              <div>
                <img style="width:50px;height:50px;" :src="scope.row.url" alt="">
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button v-show="form.status == 0" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="innerVisible = false">取 消</el-button>
        </div>
      </el-dialog>
      <el-button  type="primary" @click="addSet">新增</el-button>

      <el-table :data="tableData" style="width: 100%">
<!--        <el-table-column prop="id" label="id"></el-table-column>-->
        <el-table-column prop="initPrice" label="原价" v-dialog-drag-width="200"></el-table-column>
        <el-table-column prop="disPrice" label="折扣价"></el-table-column>
        <el-table-column prop="createTime" label="开始时间">
          <template v-slot="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="entTime" label="结束时间">
          <template v-slot="scope">
            <span>{{ parseTime(scope.row.entTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status">
          <template v-slot="scope">
            <el-tag  effect="dark">{{ isDisGoodsObj[scope.row.status] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="操作">
          <template v-slot="scope">
            <el-button type="success" v-show="scope.row.status === 0 || scope.row.status === 2" size="mini" @click="handleUpdate(scope.row,1)">启用</el-button>
            <el-button type="warning" v-show="scope.row.status === 1" size="mini" @click="handleUpdate(scope.row,2)">禁用</el-button>
            <el-button size="mini"  type="primary" @click="readSet(scope.row)">查看配置</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      isDisGoodsObj: {0: '未审核',1: '启用',2: '禁用', 3: '已结束'},
      form:{}, // 配置内容
      innerVisible:false, // 内层弹窗
      tableData:[],
      rules: {
        startTime: [{ required: true, message: "开始时间不能为空", trigger: "blur" }],
        entTime: [{ required: true, message: "结束时间不能为空", trigger: "blur" }],
      }
    }
  },
  props:{
    outerVisible:{  // 外层弹窗
      type:Boolean,
      default:false
    },
    values:{  // 商品数据
      type:Object,
      default:()=>({})
    }
  },
  watch:{
    outerVisible (newValue){
      this.$emit('update:outerVisible', newValue)
      if(newValue) this.getList()
    }
  },
  methods:{
    getList(){ // 获取数据
      this.$axios({url:'/qd/dis-goods/getList',method:'get',params:{goodsId:this.values.id}}).then(res=>{
        this.tableData = res.data ?? []
      })
    },
    addSet(){ // 新增配置
      this.$set(this, 'form', {status:0})
      let row = this.values
      if (row.img && row.img.length !== 0) this.$set(this.form, 'zhanimg', row.img[0])

      if (row.specif && row.specif.length !== 0) this.productopen()
      this.$set(this.form, 'goodsId', row.id ?? '')
      this.$set(this.form, 'name', row.name ?? '')
      this.$set(this.form, 'goodsInfo',JSON.parse(JSON.stringify(row.specif)) ?? [])
      this.innerVisible = true
    },
    submitForm(){ // 确认、修改
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        const a = this.form.goodsInfo.some(item=>{
          const b = item.child.some(ite=>{
            if(ite.groupPrice === '' || ite.groupPrice === null || ite.groupPrice === undefined) return true
          })
          if(b) return true
        })
        if(a) return this.$message.warning('请填写折扣价格')
        // 修改
        if(this.form.id){
          this.$axios({url:'/qd/dis-goods/update',method:'put',data:this.form}).then(res=>{
            this.$modal.msgSuccess("修改成功");
            this.getList();
            this.innerVisible = false;
          })
          return
        }
        // 新增
        this.$axios({url:'/qd/dis-goods/create',method:'post',data:this.form}).then(res=>{
          this.$modal.msgSuccess("新增成功");
          this.getList();
          this.innerVisible = false;
        })
      })
    },
    handleUpdate(row,nums){ // 1 启用 2 禁用
      if(nums === 1){
        this.$confirm('是否确定启用?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({url:'/qd/dis-goods/openDis',method:'get',params:{id:row.id}}).then(res=>{
            this.$modal.msgSuccess("操作成功");
            this.getList();
          })
        })
      }
      if(nums === 2){
        this.$confirm('是否确定禁用?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({url:'/qd/dis-goods/offDis',method:'get',params:{id:row.id}}).then(res=>{
            this.$modal.msgSuccess("操作成功");
            this.getList();
          })
        })
      }
    },
    readSet(row){ // 查看配置
      this.$set(this, 'form', {...row})
      if (this.values.img && this.values.img.length !== 0) this.$set(this.form, 'zhanimg', this.values.img[0])

      if (row.goodsInfo && row.goodsInfo.length !== 0) this.productopen()
      this.$set(this.form, 'name', this.values.name ?? '')
      this.innerVisible = true
    },
    productopen() { // 打开表格下拉
      this.$nextTick(() => {
        this.$refs.myTable.toggleRowExpansion(this.form.goodsInfo[0], true)
      })

    },
  }
}
</script>

<style>

</style>
